<template>
  <el-card class="box-card">
      <el-row>
          <el-col :span="5">
              <el-input v-model="searchVal" placeholder="Please input" @change="Search" />
          </el-col>
          <el-col :span="12">
              <el-button type="primary" @click="Search">查询</el-button><el-button type="primary"
                  @click="open">新增</el-button>
          </el-col>
      </el-row>
      <br>
      <el-row>
          <el-col>
              <el-table :data="tableData" :tree-props="{ children: 'Children' }" style="width: 100%;height: 65vh;" border
                  row-key="Id">
                  <el-table-column prop="Order" label="排序" width="80" />
                  <el-table-column prop="Name" label="名称" width="180" />
                  <el-table-column prop="Index" label="路径" width="80" />
                  <el-table-column prop="Icon" label="图标" width="80">
                      <template #default="scope">
                          <IconCom :icon="scope.row.Icon"></IconCom>
                      </template>
                  </el-table-column>
                  <el-table-column prop="FilePath" label="组件名" width="180" />
                  <el-table-column prop="IsEnable" label="是否启用" width="100">
                      <template #default="scope">
                          <el-switch v-model="scope.row.IsEnable" disabled />
                      </template>
                  </el-table-column>
                  <el-table-column prop="Description" label="描述" />
                  <el-table-column label="Operations" align="center">
                      <template #default="scope">
                          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                          <el-button size="small" type="danger"
                              @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
                      </template>
                  </el-table-column>
              </el-table>
              <!-- <el-pagination style="margin-top:10px;" background layout="prev,paper,next" :total="1000" /> -->
          </el-col>
      </el-row>
  </el-card>
  <add :isShow="isShow" :info="info" @closeAdd="closeAdd" @success="success"></add>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import type  {Ref} from 'vue'
import type Menu from '../../../class/Menu'


const tableData:Ref<Array<Menu>> = ref<Array<Menu>>([])

const searchVal=ref("")
let parms={
    Name:'',
    Index:'',
    FilePath:'',
    Description:''

}

const load=async()=>{

    //加载数据

}
onMounted(async()=>{
    await load()
})
const Search=async()=>{
    await load()
}
const open=()=>{
    
}
const handleEdit=(index:number, row: Menu)=>{
    console.log(index, row);
}
const handleDelete=async(index:string, row: Menu)=>{
    console.log(index, row);
}
</script>